<template>
  <div id="issue">
    <!-- 新增按钮 -->
    <el-button
      type="primary"
      @click="openDialog"
      style="margin-left: 30px; margin-top: 10px; margin-right: 30px"
    >
      新增文章
    </el-button>
    <el-select
      v-model="titleCatory"
      placeholder="请选择文章分类"
      @change="UpdateTitle()"
    >
      <el-option label="活动" :value="1"></el-option>
      <el-option label="鸡汤" :value="2"></el-option>
    </el-select>
    <!-- 渲染表格 -->
    <el-table
      ref="multipleTable"
      :data="testList"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 40px; margin-left: 30px"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="文章图片" width="150">
        <template slot-scope="scope"
          ><img :src="scope.row.backgrund" style="width: 70px; height: 70px"
        /></template>
      </el-table-column>
      <el-table-column label="文章标题" width="250">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="文章作者" show-overflow-tooltip width="230">
        <template slot-scope="scope">
          {{ scope.row.authorName }}
        </template>
      </el-table-column>
      <el-table-column label="发表时间" width="230">
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="DetailCommentary(scope.row.id)"
            >文章详情</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="openCommentary(scope.row.id)"
            >文章评论详情</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="editTitle(scope.row)"
          ></el-button>

          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="logiDelete(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框 -->
    <el-dialog
      :title="gettitle"
      :visible.sync="dialogFormVisible"
      width="1000px;"
    >
      <el-form :model="formdata" :rules="rules" ref="userform">
        <el-form-item
          label="文章作者"
          :label-width="formLabelWidth"
          size="small"
          prop="authorName"
        >
          <el-input v-model="formdata.authorName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="文章小总结"
          :label-width="formLabelWidth"
          prop="summary"
        >
          <el-input v-model="formdata.summary" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="文章标题"
          :label-width="formLabelWidth"
          prop="title"
        >
          <el-input v-model="formdata.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="文章分类"
          :label-width="formLabelWidth"
          prop="littleCategoryId"
        >
          <el-select
            v-model="formdata.littleCategoryId"
            placeholder="请选择文章分类"
          >
            <el-option label="活动" :value="1"></el-option>
            <el-option label="鸡汤" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="avatar">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="EditImg"
            style="margin-top: 10px"
            >选择文章封面图片</el-button
          >
        </el-form-item>
      </el-form>
      <div>
        <EditTitle
          ref="markdownEditor"
          v-model="formdata.articleBody.content"
          :language="language"
          height="500px"
        ></EditTitle>
        <div v-html="html" />
      </div>

      <div>
        <el-button
          style="margin-top: 80px"
          type="primary"
          icon="el-icon-document"
          @click="getHtml"
        >
          得到文章内容
        </el-button>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTitle">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 评论对话框 -->
    <el-dialog title="评论详情" :visible.sync="FormVisible" width="1000px">
      <div class="out-div">
        <div
          class="one-comment"
          v-for="item in OneDataList"
          :key="item.root.id"
        >
          <span>{{item.root.member.username}}:</span>
          <span>{{ item.root.content.message }}</span>
          <span class="deleteOne" @click="deleteone(item.root.id)">X</span>
          <div
            class="two-comment"
            v-for="tworeply in item.replies"
            :key="tworeply.id"
          >
            <span >{{tworeply.member.username}}:</span>
            <span>{{ tworeply.content.message }}</span>
            <span class="deleteTwo" @click="deleteone(tworeply.id)"> X</span>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 头像对话框 -->
    <el-dialog title="选择标签图片" :visible.sync="isShow" class="second-dig">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="Fake Action"
        :on-change="handleChange"
        :file-list="fileList"
        :auto-upload="false"
        :http-request="handleHttpRequest"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >确定</el-button
        >
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件,且不超过500kb
        </div>
      </el-upload>
    </el-dialog>
    <el-dialog title="文章详情" :visible.sync="detailVisible"  > <div style="line-height:30px;">{{articleBody}}</div></el-dialog>
  </div>
</template>

<script>
import EditTitle from "@/components/EditTitle";
export default {
  name: "Issue",
  data() {
    return {
      articleBody:'',
      detailVisible:false,
      flieData:null,
      fileList: [],
      isShow:false,
      titleshow:false,
      titleCatory:1,
      FormVisible:false,
      taptitle:'',
      ActircleList: {},
      //富文本组件所需参数
      languageTypeList: {
        en: "en_US",
        zh: "zh_CN",
        es: "es_ES",
      },
      loading: true,
      arcInfo: {
        category_id: 1,
        current: 1,
        orderByTime: "",
        size: 10,
        title: "",
      },
      testList: [],//图片内容列表
      dialogFormVisible: false,
      formdata: {
        authorName: "",
        backgrundAdress: "",
        imgFileAdress: "",
        summary: "",
        title: "",
        littleCategoryId: "",
        articleBody:{
        articleId:null,
        content: "# 富文本初始值",//富文本组件所需参数
        contentHtml: "",
        },
      },
       html:'',
       rules: {
        authorName: [
          { required: true, message: "请输入文章作者名", trigger: "change" },
        ],
        summary: [
          { required: true, message: "请输入文章总结", trigger: "", type: "" },
        ],
        title: [
          { required: true, message: "请输入文章标题", trigger: "change" },
        ],
        littleCategoryId: [
          { required: true, message: "请选择文章分类", trigger: "change" },
        ],
       
      },
      formLabelWidth: "120px",
      ComData: {
					articleId: undefined, //文章id
					current: 1, //默认第一页
					size: 30, //默认10条数据,
				},
        OneDataList:[],//评论数据
        catgory: 0,
				index: 0,
    };
  },
  components: { EditTitle },
  mounted() {
    this.GetIndexActile(this.arcInfo);
  },
  computed: {
    language() {
      return this.languageTypeList["zh"];
    },
    gettitle(){
      if(this.titleshow == true){
        return '新增文章'
      }else{
        return '修改文章' 
      }
    }
  },
  methods: {
    //
    async DetailCommentary(id){
      this.detailVisible =true
        let res = await this.$store.dispatch('titleOrPicture/getDetailTitle',id);
        if(res != ''){
          this.articleBody = res
        }
        
    },
      //打开头像选择器
    EditImg() {
      this.isShow = true;
    },
    // 以下都为上传头像方法
    handleChange(file) {
      this.flieData = file;
    },
    async handleHttpRequest() {
      let formData = new FormData();
      formData.append("file", this.flieData.raw);
      let res = await this.$store.dispatch("user/LinUpdataFile", formData);
      // console.log(this.formdata)
      if(res != ''){
        this.formdata.backgrundAdress = res;
        this.formdata.imgFileAdress = res;
      }
      
      that.$message({
        message: "已选择图片",
        type: "success",
        showClose: true,
      });
    },
    submitUpload() {
      this.$refs.upload.submit();
      this.isShow = false;
    },
    //文章分类选择
    UpdateTitle(){
        this.arcInfo.category_id = this.titleCatory
        this.GetIndexActile(this.arcInfo)
    },
    //拿到所有评论
			async GetOneCommenary(data) {
				let res = await this.$store.dispatch("doctorWithFriend/GetAllCommentary", data);
				if (res === 'ok') {
					this.OneDataList = this.$store.state.doctorWithFriend.CommentData;
					// console.log(this.OneDataList);
				}
			},
    //评论详情展示
    openCommentary(id){
      this.FormVisible = true
      this.ComData.articleId = id
      this.GetOneCommenary(this.ComData)
    },
    //拿到所有文章内容
    async GetIndexActile(data) {
      // if (this.catgory === 0) {
      //   const num = 1;
      //   data.category_id = this.catgory + num; // 得到文章Id
      // }
      data.orderByTime = this.index;
      let res = this.$store.dispatch("titleOrPicture/GetindexAllInfo", data);
      res.then(() => {
        this.loading = false
        this.testList = this.$store.state.titleOrPicture.actircleinfo;
        // console.log('文章数据', this.testList)
      });
    },
    // 打开对话框
    openDialog() {
      this.dialogFormVisible = true;
      this.titleshow = true
    },
    //修改文章按钮
    editTitle(data){
     this.titleshow = false
       console.log('222',data)
      this.dialogFormVisible = true;
      this.formdata.authorName = data.authorName
      this.formdata.summary = data.summary
      this.formdata.title = data.title
      this.formdata.id = data.id
      this.formdata.backgrundAdress = data.backgrund
      this.formdata.imgFileAdress = data.backgrund
      this.formdata.articleBody.articleId = data.id
      if(data.category == '活动'){
        this.formdata.littleCategoryId = 1
      }else{
        this.formdata.littleCategoryId = 2
      }
      // console.log('222',this.formdata)
    },
    //新增文章/修改
   async addTitle() {
    this.loading = true
    if( this.formdata.backgrundAdress == ''){
      this.$message({
        message:'请选择图片',
        type: "error",
      })
      return;
    }
    if(this.titleshow == true){
       if(this.Validate() != false){
        console.log('当前文章所需参数',this.formdata)
      this.formdata.articleBody.contentHtml = this.$refs.markdownEditor.getHtml();
     let res =  await this.$store.dispatch('titleOrPicture/PutAcricle',this.formdata);
     if(res == 'ok'){
       this.GetIndexActile(this.arcInfo);
      this.dialogFormVisible = false
      this.loading = false
      this.$message({
        message:'添加文章成功',
        type: "success",
      })
     }else{
      this.$message({
        message:'添加文章失败',
        type: "warn",
      })
     }
       }
    }else{
      if(this.Validate() != false){
         this.formdata.articleBody.contentHtml = this.$refs.markdownEditor.getHtml();
         console.log('111',this.formdata)
      let res =  await this.$store.dispatch('titleOrPicture/UpdateTic',this.formdata);
     if(res == 'ok'){
       this.GetIndexActile(this.arcInfo);
      this.dialogFormVisible = false
      this.loading = false
      this.$message({
        message:'修改文章成功',
        type: "success",
      })
     }else{
      this.$message({
        message:'修改文章失败',
        type: "warn",
      })
     }
      }
    }
    },
    //删除文章
    async logiDelete(id){
      this.$confirm("此操作将删除该菜单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async ()=>{
        let res = await this.$store.dispatch('titleOrPicture/deleteActricle',id)
       if(res == 'ok'){
         this.GetIndexActile(this.arcInfo);
         this.$message({
        message:'删除文章成功',
        type: "success",
      })
      }
      })
      
    },
    //删除评论
    async deleteone(id){
      let res = await this.$store.dispatch('doctorWithFriend/deleteCommentary',id)
      if(res == 'ok'){
        this.GetOneCommenary(this.ComData)
         this.$message({
        message:'删除该条评论成功',
        type: "success",
      })
      }
    },
    //拿到富文本
    getHtml() {
      this.html = this.$refs.markdownEditor.getHtml();
      // this.dialogFormVisible = false;
      // console.log(this.html)
    },
     //表单验证
    Validate(){
        this.$refs.userform.validate(valid=>{
          // console.log('11')
        if(!valid){
          return false
        }
        
    })
  },
  },
};
</script>

<style lang="less" scoped>
.editor-container {
  margin-bottom: 30px;
}
.out-div {
  width: 100%;
  .one-comment {
    width: 100%;
    height: auto;
    padding-bottom: 30px;
    span{
      margin-right: 20px;
      &:first-child{
        color: red;
      }
    }
    .deleteOne {
      margin-left: 20px;
      &:hover {
        cursor: pointer;
        color: red;
        transition: 0.3s;
      }
    }

    .two-comment {
      width: 100%;
      height: auto;
      margin-top: 30px;
      margin-left: 40px;
      min-height: 30px;
      span{
        margin-right: 20px;
        &:first-child{
          color: rgba(255, 0, 0, 0.689);
        }
      }
      .deleteTwo {
        margin-left: 30px;
        &:hover {
          cursor: pointer;
          color: rgba(255, 0, 0, 0.601);
          transition: 0.3s;
        }
      }
    }
  }
}
</style>